<ngx-spinner bdColor="rgba(0,0,0,0.5)" size="large" color="#fff" type="ball-clip-rotate-pulse"></ngx-spinner>
<app-alert-box></app-alert-box>
<div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            <div *ngFor="let row of alarm">
              {{row._source.title}}
            </div>
          </div>
          <div class="progress" style="height: 8px;">
              <div class="progress-bar progress-bar-striped"
                [ngClass]="{ 'progress-bar-animated bg-info': progressLoading, 'bg-secondary': !progressLoading }"
                role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
              </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Alarm ID</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Status</th>
                    <th>Risk</th>
                    <th>Tag</th>
                    <th>Sources</th>
                    <th>Destinations</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of alarm" [style.height]="wide == true ? '260px' : 'auto'">
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('alrm-id-', row.id)"
                      tooltip="Click to search {{alarmID}} in Kibana">{{row.id}}</label>
                      &nbsp;
                      <div class="btn-group" id="alrm-id-{{alarmID}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeight('alrm-id-', alarmID)">
                          search {{row.id}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_alarms', '_id', alarmID)" style="cursor: pointer">siem_alarms</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-alrm-id-{{alarmID}}" style="display: none" (click)="closeDropdown('alrm-id-', alarmID); wide=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>{{row._source.timestamp | amTimeAgo}}</td>
                    <td>{{row._source.updated_time | amTimeAgo}}</td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('alrm-status-', alarmID)">{{row._source.status}}</label>
                      &nbsp;
                      <i class="fa fa-clock-o" style="color: red" *ngIf="isProcessingUpdateStatus"></i>
                      <div class="btn-group" id="alrm-status-{{alarmID}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeight('alrm-status-', alarmID)">
                          change
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <ng-container *ngFor="let v of dsiemStatuses">
                            <a class="dropdown-item" (click)="changeAlarmStatus(alarmID, v)" style="cursor: pointer">{{v}}</a>
                          </ng-container>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-alrm-status-{{alarmID}}" style="display: none" (click)="closeDropdown('alrm-status-', alarmID); wide=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('alrm-risk-', alarmID)"
                      tooltip="Click to search {{row._source.risk_class}} in Kibana">{{row._source.risk_class}}</label>
                      &nbsp;
                      <div class="btn-group" id="alrm-risk-{{alarmID}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeight('alrm-risk-', alarmID)">
                          search {{row._source.risk_class}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_alarms', 'risk_class', row._source.risk_class)" style="cursor: pointer">siem_alarms</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-alrm-risk-{{alarmID}}" style="display: none" (click)="closeDropdown('alrm-risk-', alarmID); wide=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('alrm-tag-', alarmID)">{{row._source.tag}}</label>
                      &nbsp;
                      <i class="fa fa-clock-o" style="color: red" *ngIf="isProcessingUpdateTag"></i>
                      <div class="btn-group" id="alrm-tag-{{alarmID}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeight('alrm-tag-', alarmID)">
                          change
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <ng-container *ngFor="let v of dsiemTags">
                            <a class="dropdown-item" (click)="changeAlarmTag(alarmID, v)" style="cursor: pointer">{{v}}</a>
                          </ng-container>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-alrm-tag-{{alarmID}}" style="display: none" (click)="closeDropdown('alrm-tag-', alarmID); wide=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('alrm-src-ip-', alarmID)"
                      tooltip="Click to search {{row._source.src_ips}} in Kibana">{{row._source.src_ips}}</label>
                      &nbsp;
                      <div class="btn-group" id="alrm-src-ip-{{alarmID}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeight('alrm-src-ip-', alarmID)">
                          search {{row._source.src_ips}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_alarms', 'src_ips', row._source.src_ips)" style="cursor: pointer">siem_alarms</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-alrm-src-ip-{{alarmID}}" style="display: none" (click)="closeDropdown('alrm-src-ip-', alarmID); wide=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>
                      <div *ngFor="let d of row._source.dst_ips; let i=index">
                        <label style="cursor: pointer" (click)="openDropdown('alrm-dst-ip-', i+'-'+alarmID)"
                        tooltip="Click to search {{d}} in Kibana">{{d}}</label>
                        &nbsp;
                        <div class="btn-group" id="alrm-dst-ip-{{i}}-{{alarmID}}" dropdown style="display: none">
                          <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeight('alrm-dst-ip-', i+'-'+alarmID)">
                            search {{d}}
                          </button>
                          <ul *dropdownMenu class="dropdown-menu" role="menu">
                            <a class="dropdown-item" (click)="openKibana('siem_alarms', 'dst_ips', d)" style="cursor: pointer">siem_alarms</a>
                          </ul>
                          <button type="button" class="close" aria-label="Close" id="close-alrm-dst-ip-{{i}}-{{alarmID}}" style="display: none" (click)="closeDropdown('alrm-dst-ip-', i+'-'+alarmID); wide=false">
                            <span aria-hidden="true">×</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            Rules
          </div>
          <div class="card-body">
            <ng-template #empty><td>-</td></ng-template>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Action</th>
                    <th>Corr. Stage</th>
                    <th>Started</th>
                    <th>Ended</th>
                    <th>Status</th>
                    <th>Name</th>
                    <th>From</th>
                    <th>To</th>
                    <th>Protocol</th>
                    <th>Port From</th>
                    <th>Port To</th>
                    <th>Events</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let rule of alarmRules; let i = index" [style.height]="wideAlarmEv[i] == true ? '230px' : 'auto'">
                    <td>
                      <a  *ngIf="rule.events_count > 0" tooltip="Click to see events" style="cursor:pointer" (click)="getEventsDetail(alarmID, rule.stage, null, null, rule.events_count)">
                        <i class="fa fa-eye" ></i>
                      </a>
                    </td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('corr-stage-', rule.stage)"
                        tooltip="Click to search rule stage {{rule.stage}} in Kibana">{{rule.stage}}</label>
                        &nbsp;
                      <div class="btn-group" id="corr-stage-{{rule.stage}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeightAlarmEv('corr-stage-', rule.stage, i)">
                          search {{rule.stage}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibanaCorrStage('siem_alarm_events', alarmID, rule.stage, i)" style="cursor: pointer">siem_alarm_events</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-corr-stage-{{rule.stage}}" style="display: none" (click)="closeDropdown('corr-stage-', rule.stage); wideAlarmEv[i]=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td *ngIf="rule.start_time > 0; else empty">{{rule.start_time | amFromUnix| amTimeAgo}}</td>
                    <td *ngIf="rule.end_time > 0; else empty">{{rule.end_time | amFromUnix| amTimeAgo}}</td>
                    <td>{{setStatus(rule)}}</td>
                    <td>{{rule.name}}</td>
                    <td>{{rule.from}}</td>
                    <td>{{rule.to}}</td>
                    <td *ngIf="rule.protocol; else empty">{{rule.protocol}}</td>
                    <td *ngIf="rule.port_from; else empty">{{rule.port_from}}</td>
                    <td *ngIf="rule.port_to; else empty">{{rule.port_to}}</td>
                    <td>{{rule.events_count}}/{{rule.occurrence}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row" *ngIf="alarmVuln.length > 0">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            Vulnerabilities
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Provider</th>  
                    <th>Term</th>  
                    <th>Result</th>  
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let v of alarmVuln">
                    <td>{{v.provider}}</td>
                    <td>{{v.term}}</td>
                    <td>{{v.result}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row" *ngIf="alarmIntelHits.length > 0">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            Threat Intelligence
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Provider</th>  
                    <th>Term</th>  
                    <th>Result</th>  
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let i of alarmIntelHits">
                    <td>{{i.provider}}</td>
                    <td>{{i.term}}</td>
                    <td>{{i.result}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row" *ngIf="alarmCustomData.length > 0">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">
              Custom Data
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>Label</th>  
                      <th>Content</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let i of alarmCustomData">
                      <td>{{i.label}}</td>
                      <td>{{i.content}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>    

    <div class="row" *ngIf="events.length > 0" >
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            Event Detail
          </div>
          <div class="card-body">
            <ng-template #empty><td>-</td></ng-template>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Event ID</th>
                    <th>Timestamp</th>
                    <th>Title</th>
                    <th>Source</th>
                    <th>Destination</th>
                    <th>Protocol</th>
                    <th>Port From</th>
                    <th>Port To</th>
                    <th>Sensor</th>
                    <th>Plugin</th>
                    <th>Plugin SID</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let event of events; let i=index" [style.height]="wideEv[i] == true ? '230px' : 'auto'">
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('event-id-', event.event_id)"
                        tooltip="Click to search eventID {{event.event_id}} in Kibana">{{event.event_id}}</label>
                        &nbsp;
                      <div class="btn-group" id="event-id-{{event.event_id}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeightEv('event-id-', event.event_id, i)">
                          search {{event.event_id}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_events', 'event_id', event.event_id)" style="cursor: pointer">siem_event</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-event-id-{{event.event_id}}" style="display: none" (click)="closeDropdown('event-id-', event.event_id); wideEv[i]=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>{{event.timestamp | amTimeAgo}}</td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('title-', event.event_id)"
                      tooltip="Click to search {{event.title}} in Kibana">{{event.title}}</label>
                      &nbsp;
                      <div class="btn-group" id="title-{{event.event_id}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeightEv('title-', event.event_id, i)">
                          search {{event.title}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_events', 'title', event.title)" style="cursor: pointer">siem_event</a>
                          <a class="dropdown-item" (click)="openKibana(event.src_index_pattern, '', event.title)" style="cursor: pointer">{{event.src_index_pattern}}</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-title-{{event.event_id}}" style="display: none" (click)="closeDropdown('title-', event.event_id); wideEv[i]=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('src-ip-', event.event_id)"
                      tooltip="Click to search {{event.src_ip}} in Kibana">{{event.src_ip}}</label>
                      &nbsp;
                      <div class="btn-group" id="src-ip-{{event.event_id}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeightEv('src-ip-', event.event_id, i)">
                          search {{event.src_ip}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_events', 'src_ip', event.src_ip)" style="cursor: pointer">siem_event</a>
                          <a class="dropdown-item" (click)="openKibana(event.src_index_pattern, '', event.src_ip)" style="cursor: pointer">{{event.src_index_pattern}}</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-src-ip-{{event.event_id}}" style="display: none" (click)="closeDropdown('src-ip-', event.event_id); wideEv[i]=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>
                      <label style="cursor: pointer" (click)="openDropdown('dst-ip-', event.event_id)"
                      tooltip="Click to search {{event.dst_ip}} in Kibana">{{event.dst_ip}}</label>
                      &nbsp;
                      <div class="btn-group" id="dst-ip-{{event.event_id}}" dropdown style="display: none">
                        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="resetHeightEv('dst-ip-', event.event_id, i)">
                          search {{event.dst_ip}}
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                          <a class="dropdown-item" (click)="openKibana('siem_events', 'dst_ip', event.dst_ip)" style="cursor: pointer">siem_event</a>
                          <a class="dropdown-item" (click)="openKibana(event.src_index_pattern, '', event.dst_ip)" style="cursor: pointer">{{event.src_index_pattern}}</a>
                        </ul>
                        <button type="button" class="close" aria-label="Close" id="close-dst-ip-{{event.event_id}}" style="display: none" (click)="closeDropdown('dst-ip-', event.event_id); wideEv[i]=false">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </td>
                    <td>{{event.protocol}}</td>
                    <td *ngIf="event.src_port; else empty">{{event.src_port}}</td>
                    <td *ngIf="event.dst_port; else empty">{{event.dst_port}}</td>
                    <td>{{event.sensor}}</td>
                    <td>{{event.plugin_id}}</td>
                    <td>{{event.plugin_sid}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>  